<!-- 来自于  https://www.lingdaima.com/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>零代码-前端工具箱</title>
    <meta property="og:title" content="零代码,零代码 - 前端开发都要用的工具箱"/>
    <meta property="og:description" content="零代码工具箱提供前端各种常用工具，帮助提高前端开发效率，零代码独创的在线布局工具，通过简单拖拽即可完成各种复杂的布局！"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name=keywords content="零代码工具箱,程序员工具箱,零代码,零代码 - 前端开发都要用的工具箱,零代码在线拖拽布局,grid布局在线设计,table布局工具,excel转html">
    <meta name=Description content="零代码工具箱提供前端各种常用工具，帮助提高前端开发效率，零代码独创的在线布局工具，通过简单拖拽即可完成各种复杂的布局！">
    <link rel="icon" href="https://www.lingdaima.com/favicon.ico" type="image/x-icon"></link>
    <style>
        .container {
            width: 90%; /* 改为百分比以自适应 */
            max-width: 1040px; /* 保持桌面端最大宽度 */
            margin: auto;
        }

        .container .links {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .container .links .link {
            width: calc(33.333% - 20px); /* 三列布局，考虑间距 */
            background: #fff;
            display: flex;
            box-shadow: 0 1px 5px rgb(180 195 255 / 30%);
            transition: all .2s ease;
            align-items: center;
            padding: 15px 15px;
            margin-bottom: 20px;
            border-radius: 2px;
            border: 1px solid transparent;
        }

        .container .links .link img {
            width: 30px;
            height: 30px;
            object-fit: contain;
            margin-right: 10px;
            transition: all .2s ease;
        }

        .container .links .link .info {
            width: calc(100% - 40px); /* 动态宽度，适配图标 */
        }

        .container h1 {
            font-size: 30px;
            text-align: center;
            margin-bottom: 30px;
            color: #303659;
            font-weight: normal;
            margin-top: 40px;
        }

        .container .description {
            text-align: center;
            margin-bottom: 40px;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #303659;
            -webkit-font-smoothing: antialiased;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            outline: none;
        }

        .container .links .link:hover {
            box-shadow: 0 2px 10px rgb(180 195 255 / 50%);
            border: 1px solid #3464e0;
        }

        .container .links .link:hover img {
            transform: scale(1.1);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container .links .link {
                width: calc(50% - 15px); /* 两列布局 */
            }
        }

        @media (max-width: 480px) {
            .container .links .link {
                width: 100%; /* 单列布局 */
            }

            .container h1 {
                font-size: 24px; /* 减小标题字体 */
            }

            .container .description {
                font-size: 12px; /* 调整描述字体 */
            }
        }

        .container .links .link .info p {
            font-size: 12px;
            color: #888ea2;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
            margin: 5px 0 0 0;
        }
    </style>
</head>
<body style="background-color: rgb(250,250,250)">

<div class="container">
    <h1>零代码工具箱 - 专为前端打造</h1>
    <p class="description">本站后续会推出各种前端实用的好工具，杜绝造轮子，每款工具都经过精心打磨，帮助所有程序员提高前端开发效率！</p>

    <div class="links">

        <a href="https://lingdaima.com/grid" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/grid.png" alt="Grid 网格在线拖拽布局" />
            <div class="info">
                <h3>Grid 网格在线拖拽布局</h3>
                <p>只需简单拖拽即可完成复杂的Grid布局</p>
            </div>
        </a>

        <a href="https://lingdaima.com/table" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/table.png" alt="Table 布局" />
            <div class="info">
                <h3>Table 布局 | Excel转HTML</h3>
                <p>Excel转HTML，自动优化代码</p>
            </div>
        </a>

        <!--
        <a href="javascript:alert('即将上线')"  class="link">
            <img src="https://www.lingdaima.com/static/img/flex.png" alt="Flex 布局" />
            <div class="info">
                <h3>Flex 在线拖拽布局(开发中)</h3>
                <p>不要着急，即将上线...</p>
            </div>
        </a>
        -->

        <a href="https://lingdaima.com/shadow" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/shadow.png" alt="在线生成CSS阴影效果" />
            <div class="info">
                <h3>在线生成CSS阴影效果</h3>
                <p>使用分层箱形阴影实现更平滑、更锐利</p>
            </div>
        </a>

        <a href="https://lingdaima.com/xinnitai" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/xinnitai.png" alt="在线生成CSS新拟态风格效果" />
            <div class="info">
                <h3>在线生成CSS新拟态风格效果</h3>
                <p>国外超过的新拟态风格，设计师福利</p>
            </div>
        </a>

        <a href="https://lingdaima.com/glass" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/boli.png" alt="在线生成CSS新拟态风格效果" />
            <div class="info">
                <h3>在线生成CSS玻璃形态效果</h3>
                <p>在线制作玻璃形态效果，实时预览</p>
            </div>
        </a>

        <a href="https://lingdaima.com/cssbutton" target="_blank" class="link">
            <img src="https://www.lingdaima.com/static/img/button.png" alt="CSS按钮在线设计" />
            <div class="info">
                <h3>CSS按钮在线设计</h3>
                <p>在线设计按钮样式，并实时预览效果</p>
            </div>
        </a>

        <a href="https://lingdaima.com/typeset" class="link" target="_blank">
            <img src="https://www.lingdaima.com/static/img/paiban.png" alt="CSS文本排版工具" />
            <div class="info">
                <h3>CSS文本排版工具</h3>
                <p>可视化对文本排版，并生成CSS代码</p>
            </div>
        </a>

        <a href="https://lingdaima.com/cssbg" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/beijing.png" alt="CSS背景生成器" />
            <div class="info">
                <h3>CSS背景生成器</h3>
                <p>以像素为单位绘制任何CSS背景</p>
            </div>
        </a>


        <a href="https://lingdaima.com/svgwave" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/bolang.png" alt="SVG波浪背景生成器" />
            <div class="info" style="position: relative">
                <h3>SVG波浪背景生成器</h3>
                <p>快速制作波浪背景</p>
            </div>
        </a>


        <a href="https://lingdaima.com/css" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/css.png" alt="CSS背景生成器" />
            <div class="info" style="position: relative">
                <h3>CSS精美样式库</h3>
                <p>持续更新各种按钮、卡片等网页精美样式</p>
            </div>
        </a>

        <a href="https://lingdaima.com/jianbianse/" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/jianbianse.png" alt="在线生成CSS渐变色工具" />
            <div class="info" style="position: relative">
                <h3>在线生成CSS渐变色工具</h3>
                <p>功能强大，免费的渐变色生成工具</p>
            </div>
        </a>

        <a href="https://lingdaima.com/file/" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/file.png" alt="在线文件传输工具" />
            <div class="info" style="position: relative">
                <h3>零代码快传-在线文件传输 <b style="display: inline-block;background-color: #ff2d55;color: #fff;font-size: 10px;padding: 1px 3px;border-radius: 4px">new</b></h3>
                <p>免费好用不限速，上限4GB，网页更小兼容更好</p>
            </div>
        </a>

        <a href="https://beta.lingdaima.com" target="_blank"  class="link">
            <img src="https://www.lingdaima.com/static/img/tool2.png" alt="零代码工具箱Beta版" />
            <div class="info" style="position: relative">
                <h3>零代码工具箱Beta版</h3>
                <p>上百种在线工具，简洁好用无广告</p>
            </div>
        </a>

    </div>
</div>

<div style="width: 100%;text-align: center;padding:5px;color: #808695">
    <a target="_blank" href="https://beian.miit.gov.cn">豫ICP备2024061054号-1</a>
</div>

</body>
</html>